<template>
  <div class="row">
    <div class="col-6" v-for="item in props.rows" :key="item.id">
      <q-card class="q-ma-md">
        <q-card-section>
          <div class="row">
            <q-avatar size="50px">
              <q-img :src="item.avatar" :ratio="1 / 1" />
            </q-avatar>
            <q-item
              class="col rounded-borders"
              dense
              :to="{
                path: '/personal/' + item.id + '/follow',
              }"
            >
              <q-item-section>
                <q-item-label>{{ item.username }}</q-item-label>
                <q-item-label caption lines="2">{{ item.summary }}</q-item-label>
              </q-item-section>
            </q-item>
          </div>
        </q-card-section>
        <q-card-actions>
          <q-btn
            flat
            :to="{
              path: '/personal/' + item.id + '/follow',
            }"
          >
            关注: {{ item.favUserNum }}
          </q-btn>
          <q-btn
            flat
            :to="{
              path: '/personal/' + item.id + '/fans',
            }"
          >
            粉丝: {{ item.fansNum }}
          </q-btn>
          <q-btn
            v-if="userId == webStore.userInfo.id"
            flat
            color="warning"
            @click="
              () => {
                followUser(item.id).then((data) => {
                  if (data) {
                    Ok('取关成功')
                    emit('remove', item.id)
                  }
                })
              }
            "
          >
            取关
          </q-btn>
        </q-card-actions>
      </q-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ApiType, personalUserList } from 'src/service/api'
import { globalFollowUser } from 'src/service/api'
import { useYuan } from 'src/use'
import { useWebStore } from 'src/stores/webStore'
import { refreshUserInfo } from '../shared'

const props = defineProps<{
  userId: string
  rows: Array<rowsType>
}>()

const emit = defineEmits<{
  (e: 'remove', id: string): void
}>()

const { Ok } = useYuan()
const webStore = useWebStore()
type rowsType = ApiType<typeof personalUserList>['Return']['rows'][0]

const followUser = async (userId: string) => {
  const { error } = await globalFollowUser({ userId: userId })
  refreshUserInfo()
  return !error
}
</script>

<style scoped></style>
